<template>
  <div>
    <Button @click="modal = true">设置可售区域</Button>

    <Modal
      v-model="showSalesRegion"
      title="可售区域设置"
      width="700"
      @on-ok="ok"
      @on-cancel="cancel">
      <Row type="flex" :gutter="10" style="padding: 5px;">
        <i-col span="18"><Cascader v-model="value" :data="areaData" change-on-select></Cascader></i-col>
        <i-col><Button type="primary" shape="circle" icon="ios-search" @click="find">搜索</Button></i-col>
      </Row>

      <Row style="padding: 5px;">
        <Transfer :list-style="listStyle" :data="dealerData" :target-keys="keys" filterable :filter-method="filterMethod" @on-change="handleChange"></Transfer>
      </Row>
    </Modal>
  </div>
</template>

<script>
  import axios from 'axios'


  export default {
    name: 'GoodsInfo',
    mounted () {
      this.init();
    },
    data () {
      return {
        modal: false,
        dealerData: [],
        keys: [],
        value: [],
        areaData: [],
        listStyle: {
          width: '300px',
          height: '300px'
        }
      }
    },
    methods: {
      init () {
        axios.post("/areas/find").then(response => {
          this.areaData = this.getCascaderData(response.body);
          console.log("area aata: %o", this.areaData);
        });
      },
      find() {
        let parentId = this.value == null || this.value.length <= 0 ? null : this.value[this.value.length - 1];
        console.log("find parentId: %s", parentId)

        axios.post("/areas/dealers", null, {params: { parentId: parentId  }}).then(response => {
          this.dealerData = [];
          for (let item of response.body) {
            this.dealerData.push({
              key: item.id.toString(),
              label: item.name,
            });
          }
          console.log("dealer data: %o", this.dealerData)

        });
      },

      getCascaderData(data, parentId) {
        //1.查找root
        let items = [];
        data.forEach((item) => {
          if (item['parentId'] == parentId) {
            let value = {
              id: item.id,
              label: item.name,
              value: item.value,
              attr: item,
              parentId: item.parentId,
              children: []
            };
            value.children = this.getCascaderData(data, item.id);
            items.push(value);
          }
        });
        return items;
      },
      ok () {
        this.$Message.info('点击了确定');
      },
      cancel () {
        this.$Message.info('点击了取消');
      },
      handleChange (newKeys) {
        this.keys = newKeys;
      },
      filterMethod (data, query) {
        return data.label.indexOf(query) > -1;
      }
    }
  }
</script>
